<template>
    <div class="i-table-no-border">
        <Table ref="table" :columns="columns" :data="data" :loading="loading" size="small">
            <template slot-scope="{ row }" slot="project">
                <Tag v-if="row.project === 0">308</Tag>
                <Tag v-if="row.project === 1">311</Tag>
                <Tag v-if="row.project === 2">药浴</Tag>
                <Tag v-if="row.project === 3">熏蒸</Tag>
                <Tag v-if="row.project === 4">注射输液</Tag>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <a @click="handleDetail">详细</a>
                <Divider type="vertical" />
                <a @click="handleEdit">编辑剩余</a>
            </template>
        </Table>
        <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="100" show-elevator show-sizer show-total=""></Page>
        </div>
        <Modal v-model="editModal" title="编辑剩余治疗量" width="680" footer-hide>
            <Form>
                <FormItem>
                    <Input placeholder="请输入项目名称" v-width="300" />
                </FormItem>
            </Form>
            <Table :columns="columns2" :data="dataTreatment" border>
                <template slot-scope="{ row }" slot="normal"> <strong>{{ row.normal }}</strong>
                </template>
                <template slot-scope="{ row }" slot="assistance"> <strong>{{ row.assistance }}</strong>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <Button type="primary" @click="handleAdd">新增</Button>
                    <Divider type="vertical"></Divider>
                    <Button type="warning" @click="handleRefund">退费</Button>
                </template>
            </Table>
        </Modal>
        <Drawer title="治疗详细" width="800" v-model="drawer">
            <div class="t-main">
           <h3 class="v-tit">邱宏洋,男,13 <span>13522</span></h3>
            <div class="surplus ivu-pt-16">
                <Row :gutter="16">
                    <i-Col span="6" class="ivu-mb-16">308 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="6"  class="ivu-mb-16">311 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="6"  class="ivu-mb-16">药浴 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="6"  class="ivu-mb-16">中药 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                    <i-Col span="6"  class="ivu-mb-16">输液 <span>正常：<b>21</b> 援助：<b class="assinstance">60</b></span></i-Col>
                </Row>
    </div>
                <div class="sky-screen">
                    <row type="flex" justify="start" >
                        <Col span="8">
                            <DatePicker type="date" placeholder="治疗日期"></DatePicker>
                        </Col>
                        <Col span="4">
                            <Select v-model="formItem.select" filterable>
                                <Option value="全部" selected>全部</Option>
                                <Option value="光疗">光疗</Option>
                                <Option value="注射输液">注射输液</Option>
                                <Option value="其它">其它</Option>
                            </Select>
                        </Col>
                    </row>
                </div>
                <Table :columns="columns3" :data="alreadyData" :loading="loading" size="small">
                    <template slot-scope="{ row }" slot="action">
                        <a @click="handleTreatmentDetail"> {{ row.action }} </a>
                    </template>
                </Table>
                        <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="100" show-elevator show-sizer show-total="" size="small"></Page>
        </div>
            </div>
        </Drawer>
        <Drawer title="详细" width="600" v-model="oneDetail">
            <div class="t-main">
                    <p class="time">2019-10-21 11:59</p>
                    <Table border :columns="columns1" :data="treatmentData" size="small"></Table>
                    <p class="ivu-m-16">本次治疗:<strong>10</strong>   本次剩余:<strong>6</strong> </p>
                    <p class="ivu-m-16">患者签名:<strong>签名图片</strong></p>
            </div>
        </Drawer>
        <Modal title="308 新增/退费" width="580" v-model="addTreatment" @on-ok="operationConfirm">
        <Form :model="formItem" :label-width="80">
<Row :gutter="16">
    <i-col span="12">
        <FormItem label="正常">
            <InputNumber :min="1" /> <span class="existing">现有：18</span>
        </FormItem>
    </i-col>
    <i-col span="12">
         <FormItem label="援助">
            <InputNumber :min="1" /> <span class="existing">现有：21</span>
        </FormItem>
    </i-col>
</Row>
</Form>
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                loading: false,
                drawer: false,
                oneDetail: false,
                editModal: false,
                addTreatment: false,
                city: '',
                labelPosition: 'left',
                formData: {
                    personnel: [],
                    Occupation: ''
                },
                formItem: {
                    select: ''
                },
                columns: [
                    {
                        title: '基本信息',
                        key: 'basic',
                        minWidth: 150
                    },
                    {
                        title: '诊疗号',
                        key: 'consultant',
                        minWidth: 100
                    },
                    {
                        title: '诊室',
                        key: 'treatmentRoom',
                        minWidth: 100
                    },
                    {
                        title: '最近治疗项目',
                        slot: 'project',
                        minWidth: 138
                    },
                    {
                        title: '最近治疗时间',
                        key: 'lastTime',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '操作人',
                        key: 'operator',
                        minWidth: 150
                    },
                    {
                        title: '操作',
                        minWidth: 118,
                        slot: 'action'
                    }
                ],
                data: [
                    {
                        basic: '刘鸾英 女 26岁',
                        consultant: 13526587,
                        treatmentRoom: '三诊',
                        lastTime: '2016-10-03 16:00',
                        project: Math.floor(Math.random() * 3),
                        operator: '王语文'
                    },
                    {
                        basic: '张在峰 男 16岁',
                        consultant: 13526587,
                        treatmentRoom: '三诊',
                        lastTime: '2016-10-03 16:00',
                        project: Math.floor(Math.random() * 3),
                        operator: '刘志'
                    },
                    {
                        basic: '高艳 女 26岁',
                        consultant: 13526587,
                        treatmentRoom: '三诊',
                        lastTime: '2016-10-03 16:00',
                        project: Math.floor(Math.random() * 3),
                        operator: '张在峰'
                    }
                ],
                columns1: [
                    {
                        title: '大部位',
                        key: 'bigPosition'
                    },
                    {
                        title: '细节部位',
                        key: 'detailPosition'
                    },
                    {
                        title: '剂量/时间',
                        key: 'dose'
                    },
                    {
                        title: '数量',
                        key: 'number'
                    }
                ],
                treatmentData: [
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300/mj',
                        number: '5'
                    },
                    {
                        bigPosition: '头部',
                        detailPosition: '口部',
                        dose: '300/mj',
                        number: '5'
                    }
                ],
                columns2: [
                    {
                        title: '项目名称',
                        key: 'name',
                        width: 150
                    },
                    {
                        title: '正常数量',
                        key: 'normal',
                        slot: 'normal',
                        minWidth: 80
                    },
                    {
                        title: '援助数量',
                        key: 'assistance',
                        slot: 'assistance',
                        minWidth: 80
                    },
                    {
                        title: '操作',
                        key: 'operation',
                        slot: 'operation',
                        minWidth: 118
                    }
                ],
                columns3: [
                    {
                        title: '项目',
                        key: 'project'
                    },
                    {
                        title: '数量',
                        key: 'amount',
                        width: 90
                    },
                    {
                        title: '时间',
                        key: 'treatmentTime',
                        width: 136
                    },
                    {
                        title: '正常剩余',
                        key: 'normal',
                        width: 90
                    },
                    {
                        title: '援助剩余',
                        key: 'assistance',
                        width: 90
                    },
                    {
                        title: '操作人',
                        key: 'person',
                        width: 90
                    },
                    {
                        title: '类型',
                        key: 'type',
                        width: 70
                    },
                    {
                        title: '操作',
                        key: 'action',
                        slot: 'action',
                        width: 70
                    }
                ],
                alreadyData: [
                    {
                        project: '308',
                        amount: '-' + 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '治疗',
                        action: '详细'
                    },
                    {
                        project: '药浴',
                        amount: '+' + 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '新增'
                    },
                    {
                        project: '308',
                        amount: '-' + 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '治疗',
                        action: '详细'
                    },
                    {
                        project: '药浴',
                        amount: '-' + 21,
                        treatmentTime: '2020-01-08 16:03',
                        normal: 26,
                        assistance: 23,
                        person: '刘云',
                        type: '退费'
                    }
                ],
                dataTreatment: [
                    {
                        name: '308',
                        normal: 21,
                        assistance: 23
                    },
                    {
                        name: '311',
                        normal: 0,
                        assistance: 0
                    },
                    {
                        name: '308',
                        normal: 21,
                        assistance: 23
                    },
                    {
                        name: '311',
                        normal: 0,
                        assistance: 0
                    }
                ]
            }
        },
        methods: {
            handleDetail () {
                this.drawer = true;
            },
            handleEdit () {
                this.editModal = true;
            },
            handleAdd () {
                this.addTreatment = true;
            },
            handleRefund () {
                this.addTreatment = true;
            },
            operationConfirm () {
                this.$Message.success('成功提示')
            },
            handleDetailPatien () {
                this.$router.push('/patient/detailed')
            },
            handleTreatmentDetail () {
                this.oneDetail = true;
            }
        }
    }
</script>
<style scoped>
    .v-tit span {
        font-size:14px;
        margin-left:10px;
        color:#888;
    }
    .t-main p {
        color:#666;
        margin-bottom:8px;
    }
    .surplus strong {
        font-size:16px;
        margin-right:15px;
    }
    .t-main p strong {
        margin:0 10px;
        color:#333;
    }
    .consultant span {
        margin:0 5px;
    }
    .surplus term {
        font-weight: bold;
    }
    .sky-screen {
        margin-bottom:24px;
    }
    .ivu-divider-horizontal {
        margin-top:8px;
        margin-bottom:24px;
    }
    .existing {
        color:#888;
        margin-left:12px;
    }
    .surplus {
    color: #888;
    margin-bottom: 8px;
    }
    .surplus span {
        margin-left: 4px;
        color: #555;
    }
    .surplus span b {
        font-weight: bold;
        font-size:14px;
        margin-right:4px;
        color:#19be6b;
    }
    .surplus span b.assinstance {
        color:#ff9900;
    }
</style>
